<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./css/style.css">
    <link rel="stylesheet" href="./dist/css/page.css">
    <link rel="stylesheet" href="./css/index.css">
    <link rel="stylesheet" href="./font1/iconfont.css">
    <link rel="stylesheet" href="./font2/iconfont.css">
    <link rel="stylesheet" href="./font3/iconfont.css">

</head>

<body>
    <!-- 头部 -->
    <div class="headerBox"></div>

    <!-- 商品详情页面 -->
    <div class="w1200">
        <ul class="breadcrumb">
            <li>
                <a href="">首页</a>
            </li>
            <li>
                <a href="">外设配件</a>
            </li>
            <li>
                <a href="">键盘</a>
            </li>
            <li class="active">
                <a href="">雷神KL30无线RGB机械键盘-茶轴</a>
            </li>
        </ul>








        <div class="magnifier-box">
            <div class="preview-box fl">
                <div class="magnifier-wrap">
                    <div class="magnifier-img fl">
                        <img src="" alt="">
                        <span></span>
                        <em></em>
                    </div>
                    <div class="magnifier-Bigimg fl">
                        <img src="" alt="">
                    </div>
                    <div class="fl small-banner">
                        <span class="left-btn fl"><i class="iconfont">&#xeb04</i></span>
                        <div class="center-banner">
                            <ul class="list-img">
                                <!-- <li class="ns-border-color-gray">
                                    <img src="./imgs/magnifier1.jpg" alt="">
                                </li>
                                <li class="ns-border-color-gray">
                                    <img src="./imgs/magnifier1.jpg" alt="">
                                </li>
                                <li class="ns-border-color-gray">
                                    <img src="./imgs/magnifier1.jpg" alt="">
                                </li>
                                <li class="ns-border-color-gray">
                                    <img src="./imgs/magnifier1.jpg" alt="">
                                </li>
                                <li class="ns-border-color-gray">
                                    <img src="./imgs/magnifier1.jpg" alt="">
                                </li>
                                <li class="ns-border-color-gray">
                                    <img src="./imgs/magnifier1.jpg" alt="">
                                </li> -->
                            </ul>
                        </div>
                        <span class="right-btn fr"><i class="iconfont">&#xeb03</i></span>
                    </div>
                </div>
            </div>
            <div class="basic-info-wrap">
                <h1></h1>
                <p class="desc ns-text-color">【花呗免息分期】免驱动宏录制，长续航，双接收器，速度更快，无线机械键盘，RGB背光，自带掌托。【搭配套餐购买雷神KL201无线电竞鼠标】</p>
                <div class="item-block">
                    <div class="item-line">
                        <dl>
                            <dt class="ns-text-color-gray">官方价</dt>
                            <dd>
                                <em class="yuan ns-text-color">¥</em>
                                <span class="price ns-text-color" id="xsgood_price"></span>
                            </dd>
                        </dl>
                        <div class="statistical">
                            <ul>
                                <li class="mright">
                                    <p>累计评价</p>
                                    <a href="#">9</a>
                                </li>
                                <li>
                                    <p>累计销量</p>
                                    <a href="#">140</a>
                                </li>
                            </ul>
                        </div>
                    </div>
                </div>
                <dl class="item-line">
                    <dt>此商品赠送</dt>
                    <dd>
                        <span id="give_point" class="">可获得&nbsp; <strong class="ns-text-color"
                                style="color: #e23435 !important;">200</strong>&nbsp; 雷魂</span>
                        <span>
                            <a href="https://www.leishen.cn/try_list.html">
                                <span class="reward">
                                    <img src="https://cdn.leishen.cn/activity_m/other/newshop/jiang.png"
                                        style="width:20px; height: 20px" alt="">
                                    <div class="ky" style="display: none; top: -80px;">
                                        <div class="note1 note-left note-zi gray9 noteleft2 ">
                                            <span class=" bot"> </span>
                                            <span class="top"></span>
                                            雷魂可用于抽奖使用
                                        </div>
                                    </div>
                                </span>
                            </a>
                        </span>
                    </dd>
                </dl>
                <dl class="item-line service">
                    <dt>服务</dt>
                    <dd>
                        <span>由<a style="margin: 0 5px;" href="javascript:;"
                                class="ns-text-color">雷神（ThundeRobot）官方商城</a>发货并提供售后服务</span>
                    </dd>
                </dl>
                <hr class="divider">
                <div class="buy-number">
                    <dl class="item-line">
                        <dt>数量</dt>
                        <dd>
                            <div class="num-wrap">
                                <input type="text" class="ns-border-color-gray-shade-20" value="1" id="buy_number"
                                    data-min-buy="1" data-max-buy="1" "="">
                                <div class=" operation">
                                <span onselectstart="return false;"
                                    class="increase ns-border-color-gray-shade-20 ns-bg-color-gray-fadeout-50"
                                    data-operator="+">+</span>
                                <span onselectstart="return false;"
                                    class="decrease ns-border-color-gray-shade-20 ns-bg-color-gray-fadeout-50"
                                    data-operator="-">-</span>
                            </div>
                </div>
                <span class="unit">件</span>
                <span class="inventory">库存1件</span>
                </dd>
                </dl>
            </div>
            <div class="fenqi" style="height: 70px;">
                <dl class="item-line">
                    <dt>花呗分期</dt>
                    <dd>
                        <section class="product-config product-config-paymethod">
                            <section class="btn-list">
                                <section class="oc-radio paymethod-radio" id="fenqi_3" data-value="3">
                                    <p>￥109.67 X 3期</p>
                                    <p>(手续费 ￥2.52/期)</p>
                                </section>
                                <section class="oc-radio paymethod-radio" id="fenqi_6" data-value="6">
                                    <p>￥54.83 X 6期</p>
                                    <p>(手续费 ￥2.47/期)</p>
                                </section>
                                <section class="oc-radio paymethod-radio" id="fenqi_12" data-value="12">
                                    <p>￥27.42 X 12期</p>
                                    <p>(手续费 ￥2.06/期)</p>
                                </section>
                            </section>
                        </section>
                    </dd>
                </dl>
            </div>
            <dl class="item-line buy-btn">
                <dt></dt>
                <dd>
                    <button class="btn btn-primary js-buy-now ns-bg-color-goods ns-text-color"
                        type="button">立即购买</button>
                    <button class="btn btn-primary js-add-cart" type="button"><i
                            class="icon icon-shopping-cart"></i>加入购物车</button>
                    <a href="javascript:;" class="go-phone"
                        style="padding:0 20px; background: #ea854a3b;line-height: 40px">
                        <img src="https://www.leishen.cn/template/web/default/public/img/goods/qrcode.png">
                        <span>下载App优惠10元</span>
                        <div class="qrcode-wrap ns-border-color-gray">
                            <img src="https://www.leishen.cn/upload/goods_qrcode/goods_qrcode_729.png" alt="二维码图片"
                                width="100" height="100">
                        </div>
                    </a>

                </dd>
            </dl>
            <dl class="item-line merchant-service">
                <dt>商家服务</dt>
                <dd>
                    <span title="商家服务" class="ns-text-color-gray">1年免费保修</span>
                </dd>
                <dd>
                    <span title="商家服务" class="ns-text-color-gray">退/换货服务</span>
                </dd>
                <dd>
                    <span title="商家服务" class="ns-text-color-gray">开具发票</span>
                </dd>
                <dd>
                    <span title="商家服务" class="ns-text-color-gray">顺丰/中通包邮</span>
                </dd>
                <dd>
                    <span title="商家服务" class="ns-text-color-gray">110余家售后网点</span>
                </dd>
            </dl>
        </div>







    </div>
    </div>














    <!-- 底部 -->
    <div class="footerBox"></div>
</body>
<script src="./ajax.js"></script>
<script src="./libs/jquery.js"></script>
<script>
    $(".headerBox").load("http://localhost:3000/public/header.html .dyb_header")
    $(".footerBox").load("http://localhost:3000/public/header.html .dyb-footer")
</script>
<script src="./js/index.js"></script>
<script src="./libs/jquery.js"></script>
<script src="./js/Detailpage.js"></script>

</html>